/*
 * @Author: guotingyan
 * @Date: 2021-01-06 19:04:23
 * @LastEditors: guotingyan
 * @LastEditTime: 2021-01-06 20:57:30
 * @Description: file content
 */
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    // 单入口
    // entry: './src/index.js',
    //  数组将模块简单拼接
    // entry: ['./src/index.js', './src/1.js'],
    //  多入口、多出口
    entry: {
        index: './src/index.js',
        first: './src/1.js'
    },

    /** 占位符
     * name 入口键值名称
     * hash  本次打包hash值
     * chunkhash 每个chunk的hash 若文件未改变则chunkhash不变
     * id
     */
    output: {
        path: path.join(__dirname, './build'),
        filename: '[name].js'
            // filename: '[name]-[chunkhash:6].js'
    },
    mode: 'development',
    plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin({
        title: "首页",
        template: "./src/index.html",
        filename: "index.html"
    })],
    //  模块转换
    module: {
        rules: [{
            test: /\.css$/,
            //  loader 从后往前执行
            //  css-loader 将css内容加入到js模块中去 -- css in js
            //  style-loader 从js提取css的loader，在html中创建style标签将css放入
            // use: ['style-loader', 'css-loader']
            use: ['style-loader', {
                // css 模块化
                loader: 'css-loader',
                options: {
                    modules: true
                }
            }, {
                loader: 'postcss-loader'
            }]
        }, {
            test: /\.less$/,
            //  loader 从后往前执行
            //  css-loader 将css内容加入到js模块中去 -- css in js
            //  style-loader 从js提取css的loader，在html中创建style标签将css放入
            // use: ['style-loader', 'css-loader']
            use: ['style-loader', {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            }, {
                loader: 'postcss-loader'
            }, 'less-loader']
        }, {
            test: /\.jpg$/,
            use: [{
                loader: 'file-loader',
                // loader: 'url-loader', // 推荐使用url-loader ，拥有limit选项
                options: {
                    name: "[name]_[hash:6].[ext]",
                    outputPath: "image/"
                }
            }]
        }]
    }
}